<template>

	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block slot="content">门店</block>
		</cu-custom>
		<view>
			<view class="fixed w-100" :style="{zIndex: 999}">
				<view :style="{height: StatusBar+'px'}" class="cu-bar bg-white search">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input type="text" v-model="searchObj.sname" placeholder="输入搜索的关键词" confirm-type="search"></input>
					</view>
					<view class="action">
						<button class="cu-btn bg-main  round" @tap="search">搜索</button>
					</view>
				</view>
				<view class="bg-white" :style="{height: StatusBar*0+'px'}">
					
				</view>
			</view>
			
			<view :style="{paddingTop: StatusBar*1+'px'}">
				<view class="padding-xs" v-for="(md,index) in mds" :key="index">
					<view @tap="toStoreInfo(md.mdid)" class="bg-white shadow radius padding-xxs flex justify-between">
						<view class="w-25">
							<view class="relative w-100 radius overflow-hidden">
								<view class="img-cover relative">
								</view>
								<view class="absolute top0 w-100 h-100">
									<image class="w-100 h-100" mode="aspectFill" :src="md.cover"></image>
								</view>
							</view>
							<view>
								
							</view>
						</view>
						<view class="w-75">
							<view class="padding-xs">{{md.mdmc}}</view>
							<view class="padding-xs">{{locamap[md.pcode].criname}}{{locamap[md.scode].criname}}{{locamap[md.qcode].criname}}
								{{md.address}}</view>
							<view class="flex justify-between align-center padding-xs">
								<!-- <text>{{md.mj}}㎡</text> -->
								<text>{{md.roomsize}}个房间</text>
							</view>
						</view>
						
					</view>
				</view>
				
			</view>

			<!-- 显示更多按钮 -->
			<view class="padding" v-if="mds.length < pageInfo.total">
				<button @click="loadMore" class="cu-btn block bg-main lg">显示更多</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				searchObj: {
					sname: "",
				},
				pageInfo: {
					current: 1,
					size: 16,
					total: 0
				},
				locamap: {},
				mds: []

			};
		},
		
		computed: {
			currentPosition: function() {
				if (this.store.state.position) {
					return this.store.state.position;
				}
				return undefined;
			}
		},

		onLoad: function(option) {
			this.locamap = this.location.localmap.cmap;
			this.search();
		},
		methods: {
			search: function() {
				this.mds = [];
				this.pageInfo.current = 1;
				this.loadMds();
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadMds();
			},
			loadMds: function() {
				let param = {
					current: this.pageInfo.current,
					size: this.pageInfo.size,
					sname: this.searchObj.sname,
					flg: true
				};
				if (this.currentPosition) {
					param.jd = this.currentPosition.jd;
					param.wd = this.currentPosition.wd;
				}
				this.api("/md/page/get").send(param).then(data => {
					this.pageInfo.current = data.mds.current;
					this.pageInfo.total = data.mds.total;
					this.pageInfo.size = data.mds.size;
					for (let index in data.mds.records) {
						let record = data.mds.records[index];
						if (record.distance) {
							record.distance = this.util.formatDistance(record.distance);
						}
						this.mds.push(record);
					}
				});

			},


			// 卡片点击处理
			toStoreInfo: function(id) {
				uni.navigateTo({
					url: `/pages/cmd/md/detail?id=${id}` // 根据实际路由调整路径
				})
			}

		},


	}
</script>

<style>

</style>